<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>‌中山市第一中学-研学安全守护大屏</title>

    <link rel="stylesheet" href="./css/indexschool.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!--tuozhuai-->
    <link rel="stylesheet" type="text/css" href="./tuozhuai/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="./tuozhuai/css/reset.css">

    <!--tuozhuai-->
    <link rel="stylesheet" type="text/css" href="./tuozhuai/translucent/style.css">
</head>

<body  class="translucent-relative">

    <!-- 弹窗  交通 -->
    <div class="boxs disnone">
        <div class="boxsdiv">
            <div class="boxsdivmain">
                <div class="boxsdivmainhead">

                    <span class="titles">交通</span>
                    <span class="close"><img style="width: 0.8rem;height: 0.8rem;" src="./images/close.png"></span>
                </div>

                <div class="boxsdivmains">
                    <div class="mapcontain" style="display: flex;">
                        <div id="allmap" style="width: 50%;"></div>
                        <div>
                            <video src="http://180.166.193.6:90/images/study/shipinjiashi.mp4" style="width: 15rem;height: 10rem" controls loop
                                autoplay muted></video>
                        </div>
                    </div>
                    <div class="jiashifont">
                        <div class="jiashifontflex">
                            <span><span class="jiashifontflex1">驾驶员</span><span
                                    class="jiashi jiashifontflex2"></span></span>
                            <span><span class="jiashifontflex1" style="width: 2rem;">手机号</span><span
                                    class="jiashiphone "></span></span>
                            <span><span class="jiashifontflex1">出发地</span><span class="chufadi jiashifontflex2"
                                    style="width: 4.5rem;"></span></span>
                            <span><span class="jiashifontflex1">目的地</span><span
                                    class="mudidi jiashifontflex2"></span></span>
                        </div>
                        <div class="jiashifontflex">
                            <span><span class="jiashifontflex1">带队老师</span><span class="laoshi jiashifontflex2"></span>
                            </span>
                            <span><span class="jiashifontflex1" style="width: 2rem;">手机号</span><span
                                    class="laoshiphone "></span> </span>
                            <span><span class="jiashifontflex1">班级</span><span class="banji jiashifontflex2"
                                    style="width: 4.5rem;"></span>
                            </span>
                            <span><span class="jiashifontflex1">学生人数</span><span
                                    class="jiashifontflex2">39</span></span>
                        </div>
                    </div>
                    <div class="monitor panel"
                        style="border-image: none;border: none;height: 15rem;width: 31rem;margin-bottom: 0;">
                        <div class="inner" style="width: 31rem;position: absolute;top: 0;left: 0;padding: 0;">
                            <div class="content1" style="display: block;">
                                <div class="head">
                                    <span class="col">序号</span>
                                    <span class="col">班级</span>
                                    <span class="col">学生</span>
                                    <span class="col">性别</span>
                                    <span class="col">状态</span>
                                    <span class="col" style="width: 5rem;">时间</span>
                                </div>
                                <div class="marquee-view">
                                    <div class="marquee">
                                        <div class="row">
                                            <span class="col">1</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">张伟</span>
                                            <span class="col">男</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:15</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">2</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">王芳</span>
                                            <span class="col">女</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:16</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">3</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">李强</span>
                                            <span class="col">男</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:18</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">4</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">赵敏</span>
                                            <span class="col">女</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:18</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">5</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">陈晨</span>
                                            <span class="col">女</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:19</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">6</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">周婷婷</span>
                                            <span class="col">女</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:19</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">7</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">孙浩</span>
                                            <span class="col">男</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:19</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">8</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">吴雪</span>
                                            <span class="col">女</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:19</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">9</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">郑宇航</span>
                                            <span class="col">男</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:20</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">10</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">郑宇航</span>
                                            <span class="col">男</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:20</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col">11</span>
                                            <span class="col">高一5班</span>
                                            <span class="col">林小雅</span>
                                            <span class="col">女</span>
                                            <span class="col" style="color: #eacf19;">打卡成功</span>
                                            <span class="col" style="width: 5rem;">2025-3-11 08:20</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="boxschool disnoneschool">
        <div class="boxsdiv">
            <div class="boxsdivmain">
                <div class="boxsdivmainhead">
                    <span class="titleschool">班级总览</span>
                    <span class="closeschool"><img style="width: 0.8rem;height: 0.8rem;"
                            src="./images/close.png"></span>
                </div>
                <div class="selectmain">
                    <div class="selectmainone">
                        <div style="width: 80%;">
                            <div class="inp-password">
                                <input class="inschool" type="text" placeholder="请输入班级名称">
                            </div>
                            <div style="display: flex;">
                                <div style="z-index: 10;">
                                    <main class="mainone">
                                        <section>
                                            <!-- <label for="dropdown">Filter By: </label> -->
                                            <div class="container">
                                                <div id="dropdown" class="dropdown">
                                                    <div class="select">
                                                        <span class="selected">春季学期</span>
                                                        <i class="icon">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                height="32" viewBox="0 0 320 512">
                                                                <path
                                                                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z">
                                                                </path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <ul class="menu display show">
                                                        <li class="option active" style="--i: 0">春季学期</li>
                                                        <li class="option" style="--i: 1">秋季学期</li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </section>
                                    </main>
                                </div>
                                <div style="z-index: 10;">
                                    <main>
                                        <section>
                                            <!-- <label for="dropdown">Filter By: </label> -->
                                            <div class="container1">
                                                <div id="dropdown1" class="dropdown1">
                                                    <div class="select1">
                                                        <span class="selected1">高一1班</span>
                                                        <i class="icon1">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                height="32" viewBox="0 0 320 512">
                                                                <path
                                                                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z">
                                                                </path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <ul class="menu1 display1 show1">
                                                        <li class="option1 active1" style="--i1: 0">高一1班</li>
                                                        <li class="option1" style="--i1: 1">高一2班</li>
                                                        <li class="option1" style="--i1: 2">高一3班</li>
                                                        <li class="option1" style="--i1: 3">高一4班</li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </section>
                                    </main>
                                </div>

                            </div>
                        </div>
                        <div style="width: 20%;">
                            <button class="souch">搜索</button>
                        </div>
                    </div>

                    <div class="selectmaintwo">
                        <div class="monitor1 panel1"
                            style="border: none;border-image: none;width: 30rem;animation: none;">
                            <div class="inner1" style="width: 30rem;top: 0;left: 0;margin: 0;padding-top: 0.5rem;">
                                <div class="content2" style="display: block;">
                                    <div class="head1">
                                        <span class="col" style="width: 1.2rem;">序号</span>
                                        <span class="col" style="width: 5rem;">班级名称</span>
                                        <span class="col" style="width: 5rem;">班级位置</span>
                                        <span class="col">老师</span>
                                        <span class="col" style="width: 3rem;">联系电话</span>
                                        <!-- <span class="col">操作</span> -->
                                    </div>
                                    <div class="marquee-view">
                                        <div class="marquee" style="animation: none;">
                                            <div class="row1">
                                                <span class="col" style="width: 1.2rem;">1</span>
                                                <span class="col" style="width: 5rem;">高一1班</span>
                                                <span class="col" style="width: 5rem;">B楼101</span>
                                                <span class="col">王波</span>
                                                <span class="col" style="width: 3rem;">16621166952</span>
                                                <!-- <span class="col chakanshool"
                                                    style="cursor: pointer;display: flex;justify-content: center;">
                                                    <a style="line-height: 1.05;
                                                    padding: 0.5rem 1.5rem;
                                                    color: #61a8ff;
                                                    font-size: 0.5rem;
                                                    width: 2rem;
                                                    display: contents;
                                                    text-align: left;
                                                " href="./indexschool.html">查看</a></span> -->
                                                <span class="icon-dot"></span>
                                            </div>
                                            <div class="row1">
                                                <span class="col" style="width: 1.2rem;">2</span>
                                                <span class="col" style="width: 5rem;">高一2班</span>
                                                <span class="col" style="width: 5rem;">B楼102</span>
                                                <span class="col">刘毅</span>
                                                <span class="col" style="width: 3rem;">15921166952</span>
                                                <!-- <span class="col" style="cursor: pointer;">查看</span> -->
                                                <span class="icon-dot"></span>
                                            </div>
                                            <div class="row1">
                                                <span class="col" style="width: 1.2rem;">3</span>
                                                <span class="col" style="width: 5rem;">高一3班</span>
                                                <span class="col" style="width: 5rem;">B楼103</span>
                                                <span class="col">张诺</span>
                                                <span class="col" style="width: 3rem;">19121166952</span>
                                                <!-- <span class="col" style="cursor: pointer;">查看</span> -->
                                                <span class="icon-dot"></span>
                                            </div>
                                            <div class="row1">
                                                <span class="col" style="width: 1.2rem;">4</span>
                                                <span class="col" style="width: 5rem;">高一4班</span>
                                                <span class="col" style="width: 5rem;">B楼104</span>
                                                <span class="col">王竹</span>
                                                <span class="col" style="width: 3rem;">13321166952</span>
                                                <!-- <span class="col" style="cursor: pointer;">查看</span> -->
                                                <span class="icon-dot"></span>
                                            </div>
                                            <div class="row1">
                                                <span class="col" style="width: 1.2rem;">5</span>
                                                <span class="col" style="width: 5rem;">高一5班</span>
                                                <span class="col" style="width: 5rem;">B楼105</span>
                                                <span class="col">陈东</span>
                                                <span class="col" style="width: 3rem;">16821166952</span>
                                                <!-- <span class="col" style="cursor: pointer;">查看</span> -->
                                                <span class="icon-dot"></span>
                                            </div>
                                            <div class="row1">
                                                <span class="col" style="width: 1.2rem;">6</span>
                                                <span class="col" style="width: 5rem;">高一6班</span>
                                                <span class="col" style="width: 5rem;">B楼106</span>
                                                <span class="col">陈宇</span>
                                                <span class="col" style="width: 3rem;">15021166952</span>
                                                <!-- <span class="col" style="cursor: pointer;">查看</span> -->
                                                <span class="icon-dot"></span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="yanxuehead">
        <div class="yanxuehead1">中山市第一中学-研学安全守护大屏</div>
        <div id="times" class="yanxuehead2">
        </div>
    </div>
    <div class="viewport">

        <div class="column">
            <div class="order1 panel" style="height: 6.7rem;">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter1">
                        <a href="javascript:;" data-key="day365" class="active1">中山市第一中学</a>
                        <a href="javascript:;" data-key="day90">井冈山</a>
                        <a href="javascript:;" data-key="day30">北京故宫</a>
                        <a href="javascript:;" data-key="day1">壶口瀑布</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item" style="width: 20%;">
                            <span>
                                <img src="./images/duoyun.png" style="width: 2.5rem;">
                            </span>
                        </div>
                        <div class="item">
                            <h4>23℃</h4>
                            <span style="display: flex;">
                                <span> <i class="icon-dot" style="color: #eacf19;"></i></span>
                                <span style="margin-right: 0.5rem;">多云</span> <span>9~22℃</span>
                            </span>
                        </div>
                        <div class="item">
                            <h4>东风</h4>
                            <span style="display: flex;">
                                <span> <i class="icon-dot" style="color: #eacf19;"></i></span>
                                <span>2级</span>
                            </span>
                        </div>
                        <div class="item">
                            <h4>优</h4>
                            <span style="display: flex;">
                                <span> <i class="icon-dot" style="color: #eacf19;"></i></span>
                                <span>空气质量</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order1 panel" style="height: 14.5rem;">
                <div class="inner" style="top: -3rem;left: -6.5rem;width: 22rem;">
                    <iframe src="./jindus/index.html"
                        style="width: 22rem;height: 14.5rem;border: none;background: none"></iframe>
                </div>
            </div>

            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">研学客车交通</a>
                        <a href="javascript:;" data-index="1">设备异常报警</a>
                        <a href="javascript:;" data-index="2">人员异常报警</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">出发时间</span>
                            <span class="col">车牌号</span>
                            <span class="col">驾驶人</span>
                            <span class="col">带队老师</span>
                            <span class="col">目的地</span>
                            <span class="col">乘坐人数</span>
                            <span class="col">交通状况</span>
                            <span class="col">操作</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">25/3/24 10:00</span>
                                    <span class="col">沪A 689AQ</span>
                                    <span class="col">李凌</span>
                                    <span class="col">陈宇</span>
                                    <span class="col">北京故宫</span>
                                    <span class="col">40</span>
                                    <span class="col">正常</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">25/3/24 10:30</span>
                                    <span class="col">沪B・798XQ</span>
                                    <span class="col">赵强</span>
                                    <span class="col">吴悦</span>
                                    <span class="col">上海科技馆</span>
                                    <span class="col">38</span>
                                    <span class="col" style="color: #eacf19;">部分拥堵</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">25/3/24 11:00</span>
                                    <span class="col">苏A・987ZC</span>
                                    <span class="col">孙丽</span>
                                    <span class="col">周明</span>
                                    <span class="col">南京博物院</span>
                                    <span class="col">42</span>
                                    <span class="col">正常</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">25/3/24 13:15</span>
                                    <span class="col">浙C・654VD</span>
                                    <span class="col">钱辉</span>
                                    <span class="col">郑涵</span>
                                    <span class="col">杭州西湖</span>
                                    <span class="col">38</span>
                                    <span class="col" style="color: #eacf19;">部分拥堵</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">25/3/24 15:30</span>
                                    <span class="col">京E・567GH</span>
                                    <span class="col">马俊</span>
                                    <span class="col">李娜</span>
                                    <span class="col">八达岭长城</span>
                                    <span class="col">39</span>
                                    <span class="col">正常</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col" style="width: 3rem;">异常时间</span>
                            <span class="col">设备地址</span>
                            <span class="col" style="width: 3rem;">设备名称</span>
                            <span class="col">联系人</span>
                            <span class="col" style="width: 3rem;">联系方式</span>
                            <span class="col" style="width: 4rem;">状态</span>
                            <span class="col">操作</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/15 10:00 </span>
                                    <span class="col">鲁F・890IJ</span>
                                    <span class="col" style="width: 3rem;">GPS</span>
                                    <span class="col">张帅</span>
                                    <span class="col" style="width: 3rem;">16621188522</span>
                                    <span class="col" style="color: #ed3f35;width: 4rem;">信号不稳定</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/16 09:30</span>
                                    <span class="col">鲁 F・89012</span>
                                    <span class="col" style="width: 3rem;">摄像头</span>
                                    <span class="col">李华</span>
                                    <span class="col" style="width: 3rem;">13812345678</span>
                                    <span class="col" style="color: #00ff88;width: 4rem;">画面模糊</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/16 11:15</span>
                                    <span class="col">鲁 F・89013</span>
                                    <span class="col" style="width: 3rem;">车门传感器</span>
                                    <span class="col">周敏</span>
                                    <span class="col" style="width: 3rem;">15512346789</span>
                                    <span class="col" style="color: #ffee00;width: 4rem;">车门未关好</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col" style="width: 3rem;">异常时间</span>
                            <span class="col">人员编号</span>
                            <span class="col" style="width: 3rem;">类型</span>
                            <span class="col">联系人</span>
                            <span class="col" style="width: 3rem;">电话</span>
                            <span class="col" style="width: 4rem;">状态</span>
                            <span class="col">操作</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/25 08:30 </span>
                                    <span class="col">20254001</span>
                                    <span class="col" style="width: 3rem;">学生</span>
                                    <span class="col">林悦</span>
                                    <span class="col" style="width: 3rem;">13788996655</span>
                                    <span class="col" style="color: #ed3f35;width: 4rem;">进入危险区域</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/25 09:45</span>
                                    <span class="col">20254003</span>
                                    <span class="col" style="width: 3rem;">学生</span>
                                    <span class="col">叶萱</span>
                                    <span class="col" style="width: 3rem;">13855667788</span>
                                    <span class="col" style="color: #8000f8;width: 4rem;">长时间静止</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/25 10:20</span>
                                    <span class="col">20254004</span>
                                    <span class="col" style="width: 3rem;">学生</span>
                                    <span class="col">江宇</span>
                                    <span class="col" style="width: 3rem;">15622334455</span>
                                    <span class="col" style="color: #ffd900;width: 4rem;">超出围栏</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/25 11:00</span>
                                    <span class="col">20254005</span>
                                    <span class="col" style="width: 3rem;">学生</span>
                                    <span class="col">许瑶</span>
                                    <span class="col" style="width: 3rem;">13988776655</span>
                                    <span class="col" style="color: #2bff00;width: 4rem;">未按时归队</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col" style="width: 3rem;">25/3/25 14:50</span>
                                    <span class="col">20254008</span>
                                    <span class="col" style="width: 3rem;">学生</span>
                                    <span class="col">戴琳</span>
                                    <span class="col" style="width: 3rem;">15733445566</span>
                                    <span class="col" style="color: #f800cf;width: 4rem;">离开指定路线</span>
                                    <span class="col" style="cursor: pointer;">查看</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <!-- <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">客车交通</a>
                        <a href="javascript:;" data-index="1">异常设备监控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">故障时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">11北京市昌平西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000003</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col">1000004</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">更多模板关注公众号【DreamCoders】</span>
                                    <span class="col">1000005</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">异常时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190703</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190705</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190706</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190707</span>
                                    <span class="col">更多模板关注公众号【DreamCoders】</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190708</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190709</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->


            <!--点位-->

        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    ‌研学纪实
                </h3>
                <div class="chart">
                    <!-- <div class="geo"></div> -->
                    <div style="display: flex;">
                        <div style="width: 15rem;height: 8.8rem">
                            <video class="video1" src="http://180.166.193.6:90/images/study/shipin1.mp4" style="width: 15rem;height: 8.8rem"
                                controls loop autoplay muted></video>
                        </div>
                        <div style="width: 15rem;">
                            <video class="video1" src="http://180.166.193.6:90/images/study/shipin2.mp4" style="width: 15rem;height: 8.8rem"
                                controls loop autoplay muted></video>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="width: 15rem;height: 8.8rem">
                            <video class="video1" src="http://180.166.193.6:90/images/study/shipin3.mp4" style="width: 15rem;height: 8.8rem"
                                controls loop autoplay muted></video>
                        </div>
                        <div style="width: 15rem;">
                            <video class="video1" src="http://180.166.193.6:90/images/study/shipin4.mp4" style="width: 15rem;height: 8.8rem"
                                controls loop autoplay muted></video>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel" style="margin-bottom: 0;">
                <div class="inner">
                    <h3>研学学生总量统计-春季学期</h3>
                    <div class="chart">
                        <div class="bar" style="height: 8rem;"></div>
                        <div class="data">
                            <div class="item">
                                <h4>690</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    学生总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>10</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="order panel" style="height: 11.5rem;">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-keys="day365" class="active">陈怡</a>
                        <a href="javascript:;" data-keys="day90">李丽</a>
                        <a href="javascript:;" data-keys="day30">王悦</a>
                        <a href="javascript:;" data-keys="day1">刘佳</a>
                        <a href="javascript:;" data-keys="day2">孙阳</a>
                        <a href="javascript:;" data-keys="day3">周娜</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data" style="display: block;">
                        <div style="display: flex;width: 100%;">
                            <div class="item" style="width: 2.5rem;margin-right: 1rem;">
                                <span>
                                    <img src="./images/xuesheng1.png"
                                        style="width: 2rem;height:  2rem;border-radius: 5rem;">
                                </span>
                                <p style="color: white;text-align: center;font-size: 0.45rem;">高一(1)</p>
                            </div>
                            <div class="item">

                                <h4 style="font-size: 0.8rem;">73</h4>
                                <span style="display: flex;align-items: center;">
                                    <span>
                                        <img src="./images/xin.png" style="width: 0.8rem;border-radius: 5rem;"></span>
                                    <span style="margin-left: 0.2rem;font-size: 0.6rem;">心率
                                        <span style="font-size: 0.4rem;;color: #3594df;">(次/分钟)</span></span>
                                </span>
                            </div>
                            <div class="item">
                                <h4 style="font-size: 0.8rem;">125/82</h4>
                                <span style="display: flex;align-items: center;">
                                    <span>
                                        <img src="./images/xueya.png" style="width: 0.8rem;border-radius: 5rem;"></span>
                                    <span style="margin-left: 0.2rem;font-size: 0.6rem;">血压
                                        <span style="font-size: 0.4rem;color: #3594df;">(mmHg)</span></span>
                                </span>
                            </div>
                            <div class="item">
                                <h4 style="font-size: 0.8rem;">36.5</h4>
                                <span style="display: flex;align-items: center;">
                                    <span>
                                        <img src="./images/tiwen.png" style="width: 0.8rem;border-radius: 5rem;"></span>
                                    <span style="margin-left: 0.2rem;font-size: 0.6rem;">体温
                                        <span style="font-size: 0.4rem;color: #3594df;">(℃)</span></span>
                                </span>
                            </div>
                            <div class="item">
                                <h4 style="font-size: 0.8rem;">故宫北侧</h4>
                                <span style="display: flex;align-items: center;">
                                    <span>
                                        <img src="./images/weizhi.png"
                                            style="width: 0.8rem;border-radius: 5rem;"></span>
                                    <span style="margin-left: 0.2rem;font-size: 0.6rem;">当前位置</span>
                                </span>
                            </div>
                        </div>
                        <div style="height: 5rem;margin-top: 0.8rem;">
                            <div class="chart" style="height: 5rem;">
                                <!-- <div class="label">单位:万</div> -->
                                <div class="line" style="height: 5rem;"></div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <!-- <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:万</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div> -->
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>研学总览</h3>
                        <div class="data">
                            <div class="item itemschool" style="cursor: pointer;">
                                <h4>36 <small>个</small></h4>
                                <span>
                                    <img style="width: 0.5rem;height: 0.5rem;" src="./images/xuexiao.png">
                                    班级
                                </span>
                            </div>
                            <div class="item">
                                <h4 class="tanchuang">23 <small>个</small></h4>
                                <span>
                                    <img style="width: 0.5rem;height: 0.5rem;" src="./images/zhonglei.png">
                                    设备种类
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>720 <small>名</small></h4>
                                <span>
                                    <img style="width: 0.5rem;height: 0.5rem;" src="./images/renshu.png">
                                    学生人数
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>个</small></h4>
                                <span>
                                    <img style="width: 0.5rem;height: 0.5rem;" src="./images/yujing.png">
                                    预警
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>研学进度 学期</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>12</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        计划数量
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel" style="margin-bottom: 0;">
                <div class="inner">
                    <div class="all">
                        <h3>研学热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                井冈山
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i>
                                故宫
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i>
                                上海科技馆
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省热榜 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>北京</span>
                                    <span>25,179 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>河北</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>上海</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>江西</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>山东</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">
                                <!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--tuozhuai-->
    <script src="./tuozhuai/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="./tuozhuai/translucent/jquery-translucent.js"></script>
    <script>
        (function aa(){
            $("body").translucent({
                titleGroundColor: "#18546f",
                backgroundColor: "#ffffff",
                titleFontColor: "#ffffff",
                titleFontSize: 14,
                opacity: 1,
                zIndex: 100,
                textHtml: '<div><div style="text-align: center;color:black;font-size:18px;margin:10px 0;">驾驶员：<span style="color:red">李宗 16625588636</span></div>'+
                '<div style="text-align: center"><video class="video1" src="http://180.166.193.6:90/images/study/yongsj.mp4" style="width: 500px;height: 330px" controls loop autoplay muted>'+
                    '</video><div>'+
                        '<div style="color:red;font-size:15px;width:100%;display: flex;padding:5px 0"><span style="width:50%;text-align: center">报警时间：09:15:15</span><span style="width:50%;text-align: center">报警内容：开车使用手机</span></div>'+
                        '<div style="color:red;font-size:15px;width:100%;display: flex;padding:5px 0"><span style="width:50%;text-align: center">乘坐班级：高一1班</span><span style="width:50%;text-align: center">带队老师：陈亮 15988636968</span></div>'
                        +'<div>',
                close: function ($dom) {
                    alert("确定要关闭吗？")
                }
            });
        })();
                
            $(".tanchuang").click(function(){
                console.log("点击")
                aa()
                
            })
    </script>
    <!--tuozhuai-->
</body>
<script type="text/javascript"
    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=25F52aGMMdboa3UB2GIhpPbtrNxA7S2I"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/indexschool.js"></script>

<script src="./js/china.js"></script>
<script src="./js/scriptschool.js"></script>
<!-- <script src="./js/mymap.js"></script> -->

</html>